{extend name='common/container'}
{block name="content"}
<div class="home" style="margin:0 15px 15px 15px;min-height:650px;" v-cloak>
	<el-row :gutter="15">
		<el-col v-for="(item,index) in web_card_data" :key="index" :xs="12" :sm="12" :md="12" :lg="6">
			<el-card shadow="never">
				<div slot="header" class="clearfix">
					<span><i :class='item.title_icon'></i> {{item.card_title}}</span>
					<div class="cycle" :style="{backgroundColor:item.card_cycle_back_color}">{{item.card_cycle}}</div>
				</div>
				<div style="padding:0">
					<h1 style="font-size:150%;color:#909399; margin:0; padding:0">{{item.vist_num}}</h1>
					<p style="float:left;color:#909399">{{item.bottom_title}}</p>
					<p style="float:right;color:#909399">{{item.vist_all_num}}</p>
				</div>
			</el-card>
		</el-col>
	</el-row>
	<el-row v-if="echat_data">
		<el-card shadow="never" style="margin-top:5px;">
			<div slot="header" class="clearfix"><span>网站数据</span></div>
			<div>
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24" :md="24" :lg="24">
						<div id="myChart" style="height:300px; margin-bottom:10px"></div>
					</el-col>
				</el-row>
			</div>
		</el-card>
	</el-row>
</div>


{/block}

{block name="script"}
<script src="__PUBLIC__/assets/js/app.js"></script>
<script src="__PUBLIC__/assets/js/echarts-all.js"></script>
<script src="__PUBLIC__/assets/js/macarons.js"></script>
<script>
new Vue({
	el: '#app',
	data(){
		return {
			web_card_data: [],
			menus:[],
			echat_data:[],
		}
	},
	mounted () {
		this.cardData()
	},
	methods: {
		cardData(){
			axios.post(base_url+'/Index/main').then(res => {
				if(res.data.status == 200){
					this.web_card_data = res.data.card_data
					this.echat_data = res.data.echat_data
					if(res.data.echat_data){
						this.drawLine(res.data.echat_data.day_count)
					}
				}
			})
		},
		drawLine(data){
			let myChart = echarts.init(document.getElementById('myChart'),'macarons')
			myChart.setOption({
				title : {
					text: data.title
				},
				tooltip : {
					trigger: 'axis'
				},
				grid:{
					x:40,
					x2:40,
					y2:24
				},
				calculable : true,
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						data : data.day
					}
				],
				yAxis : [
					{
						type : 'value',
					}
				],
				series : [
					{
						name:'业绩',
						type:'line',
						data:data.data,
						markPoint : {
							data : [
								{type : 'max', name: '最大值'}
							]
						},
						markLine : {
							data : [
								{type : 'average', name: '平均值'}
							]
						}
					}
				]
			})
		}
	},
})
</script>
{/block}